<template>
  <gesture-back>
    <view class="info-container">
      <!-- 顶部导航栏 -->
      <view class="header">
        <view class="back-btn" @tap="goBack">
          <image src="/static/icons/back.png" mode="aspectFit" class="back-icon"></image>
        </view>
        <view class="title-container">
          <text class="title">个人信息</text>
        </view>
        <view class="save-btn" @tap="saveUserInfo">
          <text>保存</text>
        </view>
      </view>
      
      <!-- 个人信息表单 -->
      <view class="form-container">
        <!-- 用户名和头像放一行，用户名在左，头像在右 -->
        <view class="form-item user-info-row">
          <text class="form-label">用户名</text>
          <view class="form-content-wrapper">
            <input class="form-input username-field" type="text" v-model="userInfo.username" placeholder="请输入用户名" />
            <view class="avatar-wrapper" @tap="changeAvatar">
              <image class="avatar-small" :src="userInfo.avatar || '/static/avatar.png'" mode="aspectFill"></image>
              <view class="edit-mark"></view>
            </view>
          </view>
        </view>
        
        <!-- 航司选择 -->
        <view class="form-item required">
          <text class="form-label">航司</text>
          <picker class="form-picker" :range="airlineOptions" @change="onAirlineChange">
            <view class="picker-value">
              <text>{{ userInfo.airline || '请选择航司' }}</text>
              <text class="iconfont icon-right"></text>
            </view>
          </picker>
        </view>
        
        <!-- 基地选择 -->
        <view class="form-item required">
          <text class="form-label">基地</text>
          <picker class="form-picker" :range="baseOptions" @change="onBaseChange">
            <view class="picker-value">
              <text>{{ userInfo.base || '请选择基地' }}</text>
              <text class="iconfont icon-right"></text>
            </view>
          </picker>
        </view>
        
        <!-- 号位资质选择 -->
        <view class="form-item required">
          <text class="form-label">号位资质</text>
          <picker class="form-picker" :range="positionOptions" @change="onPositionChange">
            <view class="picker-value">
              <text>{{ userInfo.position || '请选择号位资质' }}</text>
              <text class="iconfont icon-right"></text>
            </view>
          </picker>
        </view>
        
        <!-- 其他资质选择 -->
        <view class="form-item required">
          <text class="form-label">其他资质</text>
          <view class="checkbox-group">
            <view class="qualification-group">
              <text class="group-title">机型</text>
              <view class="checkbox-list">
                <view 
                  v-for="(item, index) in aircraftOptions" 
                  :key="index" 
                  class="checkbox-item"
                  :class="{ active: isAircraftSelected(item) }"
                  @tap="toggleAircraft(item)"
                >
                  {{ item }}
                </view>
              </view>
            </view>
            <view class="qualification-group">
              <text class="group-title">证照</text>
              <view class="checkbox-list">
                <view 
                  v-for="(item, index) in passportOptions" 
                  :key="index" 
                  class="checkbox-item"
                  :class="{ active: isPassportSelected(item) }"
                  @tap="togglePassport(item)"
                >
                  {{ item }}
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 手机号 -->
        <view class="form-item required">
          <text class="form-label">手机号</text>
          <view class="phone-verify">
            <input class="form-input phone-input" type="number" v-model="userInfo.phone" placeholder="请输入手机号" maxlength="11" />
            <button class="verify-btn" @tap="sendVerifyCode" :disabled="countdown > 0">
              {{ countdown > 0 ? `${countdown}秒后重发` : '获取验证码' }}
            </button>
          </view>
        </view>
        
        <!-- 验证码 -->
        <view class="form-item" v-if="showVerifyCodeInput">
          <text class="form-label">验证码</text>
          <input class="form-input" type="number" v-model="verifyCode" placeholder="请输入验证码" maxlength="6" />
        </view>
      </view>
    </view>
  </gesture-back>
</template>

<script>
import GestureBack from '@/components/gesture-back/index.vue';

export default {
  components: {
    GestureBack
  },
  data() {
    return {
      userInfo: {
        avatar: '',
        username: '',
        airline: '',
        base: '',
        position: '',
        selectedAircrafts: [],
        selectedPassports: [],
        phone: ''
      },
      verifyCode: '',
      showVerifyCodeInput: false,
      countdown: 0,
      // 这些选项在实际应用中应该从后端获取
      airlineOptions: ['南方航空', '东方航空', '国际航空', '海南航空', '深圳航空'],
      baseOptions: ['广州', '北京', '上海', '深圳', '成都', '西安'],
      positionOptions: ['机长', '副驾驶', '资深副驾驶', '教员', '检查员'],
      aircraftOptions: ['A320', 'B737', 'B787', 'A330', 'A350'],
      passportOptions: ['有护照', '无护照']
    }
  },
  onLoad() {
    // 获取用户信息
    this.getUserInfo()
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    getUserInfo() {
      // 这里应该是从后端获取用户信息的接口
      // 模拟获取数据
      setTimeout(() => {
        this.userInfo = {
          avatar: '/static/avatar.png',
          username: '小七七',
          airline: '南方航空',
          base: '广州',
          position: '副驾驶',
          selectedAircrafts: ['A320', 'A330'],
          selectedPassports: ['有护照'],
          phone: '13800138000'
        }
      }, 500)
    },
    onAirlineChange(e) {
      const index = e.detail.value
      this.userInfo.airline = this.airlineOptions[index]
    },
    onBaseChange(e) {
      const index = e.detail.value
      this.userInfo.base = this.baseOptions[index]
    },
    onPositionChange(e) {
      const index = e.detail.value
      this.userInfo.position = this.positionOptions[index]
    },
    isAircraftSelected(item) {
      return this.userInfo.selectedAircrafts.includes(item)
    },
    toggleAircraft(item) {
      if (this.isAircraftSelected(item)) {
        this.userInfo.selectedAircrafts = this.userInfo.selectedAircrafts.filter(i => i !== item)
      } else {
        this.userInfo.selectedAircrafts.push(item)
      }
    },
    isPassportSelected(item) {
      return this.userInfo.selectedPassports.includes(item)
    },
    togglePassport(item) {
      if (this.isPassportSelected(item)) {
        this.userInfo.selectedPassports = this.userInfo.selectedPassports.filter(i => i !== item)
      } else {
        this.userInfo.selectedPassports.push(item)
      }
    },
    sendVerifyCode() {
      if (!this.userInfo.phone || this.userInfo.phone.length !== 11) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      // 显示验证码输入框
      this.showVerifyCodeInput = true
      
      // 开始倒计时
      this.countdown = 60
      const timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(timer)
        }
      }, 1000)
      
      // 模拟发送验证码
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      })
    },
    saveUserInfo() {
      // 表单验证
      if (!this.userInfo.airline) {
        uni.showToast({
          title: '请选择航司',
          icon: 'none'
        })
        return
      }
      
      if (!this.userInfo.base) {
        uni.showToast({
          title: '请选择基地',
          icon: 'none'
        })
        return
      }
      
      if (!this.userInfo.position) {
        uni.showToast({
          title: '请选择号位资质',
          icon: 'none'
        })
        return
      }
      
      if (this.userInfo.selectedAircrafts.length === 0 || this.userInfo.selectedPassports.length === 0) {
        uni.showToast({
          title: '请选择其他资质',
          icon: 'none'
        })
        return
      }
      
      if (!this.userInfo.phone || this.userInfo.phone.length !== 11) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      if (this.showVerifyCodeInput && (!this.verifyCode || this.verifyCode.length !== 6)) {
        uni.showToast({
          title: '请输入正确的验证码',
          icon: 'none'
        })
        return
      }
      
      // 模拟保存成功
      uni.showLoading({
        title: '保存中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
        
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 1000)
    },
    changeAvatar() {
      // 实现头像编辑逻辑
    }
  }
}
</script>

<style lang="scss">
.info-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

.header {
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
}

.title-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  text-align: center;
}

.save-btn {
  width: 80rpx;
  text-align: right;
  font-size: 32rpx;
  color: #1989fa;
  flex-shrink: 0;
}

.form-container {
  padding: 20rpx;
}

.form-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: flex-start;
  
  &.required {
    .form-label::before {
      content: '*';
      color: #ff4d4f;
      margin-right: 4rpx;
    }
  }
}

.form-label {
  font-size: 28rpx;
  color: #333;
  width: 160rpx;
  flex-shrink: 0;
}

.form-input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  color: #333;
}

.user-info-row {
  align-items: center;
}

.form-content-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.username-field {
  flex: 1;
  height: 60rpx;
  margin-right: 20rpx;
  border-bottom: 1px solid #eee;
}

.avatar-wrapper {
  width: 80rpx;
  height: 80rpx;
  position: relative;
  flex-shrink: 0;
}

.avatar-small {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  border: 1px solid #eee;
}

.edit-mark {
  position: absolute;
  right: -6rpx;
  bottom: -6rpx;
  width: 24rpx;
  height: 24rpx;
  background-color: #1989fa;
  border-radius: 50%;
  border: 2rpx solid #fff;
}

.form-picker {
  flex: 1;
}

.picker-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  text {
    font-size: 28rpx;
    color: #333;
    
    &.iconfont {
      color: #999;
      font-size: 24rpx;
    }
  }
}

.phone-verify {
  flex: 1;
  display: flex;
  align-items: center;
}

.phone-input {
  flex: 1;
}

.verify-btn {
  width: 200rpx;
  height: 60rpx;
  background-color: #1989fa;
  color: #ffffff;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
  border-radius: 8rpx;
  
  &[disabled] {
    background-color: #cccccc;
  }
}

.checkbox-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.qualification-group {
  margin-bottom: 16rpx;
}

.group-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.checkbox-list {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-item {
  padding: 8rpx 16rpx;
  background-color: #f5f5f5;
  border-radius: 6rpx;
  margin-right: 16rpx;
  margin-bottom: 12rpx;
  font-size: 26rpx;
  color: #333;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  
  &.active {
    background-color: #e8f3ff;
    color: #1989fa;
    border-color: #1989fa;
    
    &::after {
      content: '';
      position: absolute;
      right: -4rpx;
      bottom: -4rpx;
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      background-color: #1989fa;
    }
  }
}
</style> 